<!doctype html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html,#container{
        height: 100%;
        margin: 0px;
      }
	  /* 定义  主题 */
    	.amap-ui-control-theme-my-set{ background:#fff;}
    </style>
    <title>标记使用</title>
  </head>
  <body>
  	<!--地图-->
  	<div style="position:relative;width:100%;height:70%;">
    	<div id="container" tabindex="0" style="width:100%;height:70%;""></div>
    </div>
    <div>
    	<button id="rp">移除绘制路线</button>
        <button id="sp">生成绘制路线</button>
        <button id="qp">切换绘制路线</button>
        <button id="c1">显示类型1</button>
        <button id="c11">隐藏类型1</button>
        <button id="c2">显示类型2</button>
        <button id="c22">隐藏类型2</button>
    </div>
    <div>
    	<button id="t1">类型1</button>
        <button id="t2">类型2</button>
        <button id="t3">类型3</button>
        <button id="t4">类型4</button>
        <button id="t5">类型5</button>
        <button id="t6">类型6</button>
    </div>
    <!--操作-->
	<script type="text/javascript" src="zepto.js"></script>
    <script type="text/javascript" src="b.js"></script>
    <script type="text/javascript" src="c.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=9a621a769237615e36fe158651cc8e1f"></script>
    <script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js"></script>
    <script type="text/javascript">
    var defaultLayer = new AMap.TileLayer();//默认样式的图层，不使用layers属性的时候无需设置
		var buildingLayer = new AMap.Buildings(); //实例化3D地图图层
		var trafficLayer = new AMap.TileLayer.Traffic({zIndex:10}); //实时路况图层
		var roadNetLayer = new AMap.TileLayer.RoadNet({zIndex:10}); //实例化路网图层
		var satellLayer = new AMap.TileLayer.Satellite({zIndex:10}); //实例化卫星图
    	    //创建地图
			var map = new AMap.Map('container');
			map.setZoom(10);
			map.setCenter([116.39,39.9]);
			defaultLayer.setMap(map);
			AMap.event.addListener(map,'zoomend',function(){
				console.log("当前缩放级别："+map.getZoom());
			});
		//type
			$("#t1").click(function(){
			
			roadNetLayer.setMap(map); 
    		
		})
		$("#t2").click(function(){
			roadNetLayer.setMap(null);
		})
		$("#t3").click(function(){
			satellLayer.setMap(map);
		})
		$("#t4").click(function(){
			satellLayer.setMap(null);
		})
		$("#t5").click(function(){
			buildingLayer.setMap(map);
			map.setZoom(17);
		})
		$("#t6").click(function(){
			buildingLayer.setMap(null);
		})
			//ui
			AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
		
		
		
				//图层切换控件
				map.addControl(new BasicControl.LayerSwitcher({
					theme: 'my-set',//自定义样式
					position: 'rt'
				}));
				
			});
			//信息窗体
			var infoWindow = new AMap.InfoWindow();
			//点标记事件
			var _onClick = function(e){
				infoWindow.setContent(e.target.ht);
				infoWindow.open(map,e.target.getPosition());
				map.setFitView();
			};
			//设置点标注
			var markers=[];
			for(var i=0;i<provinces.length;i++){
				markers[i]=new AMap.Marker({
					icon : '1.png',//24px*24px
					position: provinces[i].center.split(","),
					title: provinces[i].name,
					offset: new AMap.Pixel(-10,0),
					map: map
				});
				markers[i].ht=provinces[i].name;
				AMap.event.addListener(markers[i], 'click', _onClick);
			};
			var twos=[];
			for(var i=0;i<provinces2.length;i++){
				twos[i]=new AMap.Marker({
					icon : '2.png',//24px*24px
					position: provinces2[i].center.split(","),
					title: provinces2[i].name,
					offset: new AMap.Pixel(-10,0),
					map: map
				});
				twos[i].ht=provinces2[i].name;
				AMap.event.addListener(twos[i], 'click', _onClick);
			};
			//根点标注 地图缩放到合适显示
    		map.setFitView();
			
			
			//事件处理
			$("#c1").on("click",function(){
				for(var i=0;i<markers.length;i++){
					markers[i].show();
				};
			});
			$("#c11").on("click",function(){
				for(var i=0;i<markers.length;i++){
					markers[i].hide();
				};
			});
			$("#c2").on("click",function(){
				for(var i=0;i<twos.length;i++){
					twos[i].show();
				};
			});
			$("#c22").on("click",function(){
				for(var i=0;i<twos.length;i++){
					twos[i].hide();
				};
			});
			
			//绘制轨迹
			//加载PathSimplifier，loadUI的路径参数为模块名中 'ui/' 之后的部分 
			AMapUI.load(['ui/misc/PathSimplifier'], function(PathSimplifier) {
			
				if (!PathSimplifier.supportCanvas) {
					alert('当前环境不支持 Canvas！');
					return;
				}
				
		
				var pathSimplifierIns = new PathSimplifier({
					zIndex: 101,
					map: map, //所属的地图实例
					getPath: function(pathData, pathIndex) {
						//返回轨迹数据中的节点信息，[AMap.LngLat, AMap.LngLat...] 或者 [[lng,lat],[lng,lat]...]
						return pathData.path;
					},
					getHoverTitle: function(pathData, pathIndex, pointIndex) {
						//返回鼠标悬停时显示的信息
						if (pointIndex >= 0) {
							//鼠标悬停在某个轨迹节点上
							return pathData.name + '，点:' + pointIndex + '/' + pathData.path.length;
						}
						//鼠标悬停在节点之间的连线上
						return pathData.name + '，点数量' + pathData.path.length;
					},
					renderOptions: {
						keyPointTolerance:2,
						//轨迹线的样式
						pathLineStyle: {
							strokeStyle: '#ccc',
							lineWidth: 6,
							dirArrowStyle: true
						},
						pathLineSelectedStyle: {
							strokeStyle: '#db6c29'
						},
						pathLineHoverStyle: {
							strokeStyle: '#db6c29'
						},
						pathNavigatorStyle:{
							width: 24,
							height: 24,
							//使用图片
							content: PathSimplifier.Render.Canvas.getImageContent('./1.png', onload, onerror),
							strokeStyle: null,
							fillStyle: null,
							//经过路径的样式
							pathLinePassedStyle: {
								lineWidth: 2,
								strokeStyle: '#db6c29',
								dirArrowStyle: {
									stepSpace: 15,
									strokeStyle: '#fff'
								}
							}
						}
					}
				});
				var arrpath=[
						[126.405285,39.904989],
						[124.502461,38.045474],
						[107.617733,43.792818]
					];
				var arrpath2=[
						[12.405285,39.904989],
						[12.502461,38.045474],
						[55.617733,43.792818]
					];		
				var arrpathdes=[
						["你好起点"],
						["你好2"],
						["你好终点"]
					];	
				//这里构建两条简单的轨迹，仅作示例
				pathSimplifierIns.setData([{
					name: '轨迹1',
					path: arrpath
				}]);
				
				//创建一个巡航器
				var navg0 = pathSimplifierIns.createPathNavigator(0, {
					loop: true, //循环播放
					speed: 500000
				});
	
				navg0.start();
				
				//轨迹事件处理

				$("#rp").on("click",function(e){
					pathSimplifierIns.setData([{
						name: '轨迹1',
						path: []
					}]);
					navg0.stop();
					map.setFitView();
				});
				
				$("#sp").on("click",function(e){
					pathSimplifierIns.setData([{
						name: '轨迹1',
						path: arrpath
					}]);
					navg0 = pathSimplifierIns.createPathNavigator(0, {
						loop: true, //循环播放
						speed: 500000
					});
					navg0.start();
					map.setFitView(-1);
				});
				
				$("#qp").on("click",function(e){
					pathSimplifierIns.setData([{
						name: '轨迹1',
						path: arrpath2
					}]);
					navg0.stop();
					navg0 = pathSimplifierIns.createPathNavigator(0, {
						loop: true, //循环播放
						speed: 500000
					});
					navg0.start();
					map.setFitView(-1);
				});
				
				//节点点击
				pathSimplifierIns.on('pointClick', function(e, info){
					//info.pathData 即是相关的轨迹数据，如果info.pointIndex >= 0，则表示由轨迹上的节点触发
					infoWindow.setContent(arrpathdes[info.pointIndex][0]);
					infoWindow.open(map,new AMap.LngLat(arrpath[info.pointIndex][0],arrpath[info.pointIndex][1]));
				});
				
			
			});
			
			
			
			
	
    </script>
  </body>
</html>
